import React,{useContext} from 'react'

//创建上下文
const MyContext = React.createContext();
const {Provider,Consumer} = MyContext;

function Child(prop){
  return <div>Child:{prop.foo}</div>
}
function Child2(prop){
  const context = useContext(MyContext);
  return <div>Child2:{context.foo}</div>
}
//使用class指定静态contextType
class Child3 extends React.Component{
  static contextType = MyContext;
  render(){
    return <div>Child3:{this.context.foo}</div>
  }
}
export default function ContextText(){
  return (
    <div>
      <Provider value={{foo:'bar'}}>
        {/* 消费方法1：Consumer */}
        <Consumer>
          {value=><Child {...value}/>}
        {/* 消费方法2：hook */}
        </Consumer>
        <Child2/>
        {/* 消费方法3：contextType */}
        <Child3/>
      </Provider>
    </div>
  )
}